<template>
  <div>
    <div class="container">

      <el-tabs :tab-position="tabPosition">
        <!-- 头部输入框 -->
        <el-tab-pane label="账户设置">
          <el-card>
            <el-row type="flex" justify="space-around" class="nav2">
              <el-col :span="8">
                <span>账户：</span><el-input v-model="account" placeholder="请输入内容" size="mini" @blur="search" />
              </el-col>
              <el-col :span="8">
                <span>姓名：</span><el-input v-model="username" placeholder="请输入内容" size="mini" @blur="search" />
              </el-col>
              <el-col :span="8">
                <span>联系方式：</span>

                <el-input v-model="phone" placeholder="请输入内容" size="mini" @blur="search" />

              </el-col>
            </el-row>
            <!-- 新增/查询/重置按钮 -->
            <el-row type="flex" justify="space-between" class="nav3">
              <el-col :span="12">
                <el-button type="primary" size="mini" @click="dialogVisible=true">+新建</el-button>
              </el-col>
              <el-col :span="11" style="display: flex;justify-content: flex-end;">
                <el-button type="primary" size="mini" @click="search">查询</el-button><el-button size="mini">重置</el-button>
              </el-col>
            </el-row>
            <!-- 账户设置表单（第一页） -->
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%;margin-top:15px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="100"
              />
              <el-table-column
                label="账号"
                width="200"
                prop="account"
              >
              <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
              </el-table-column>
              <el-table-column
                prop="username"
                label="姓名"
                width="200"
              />
              <el-table-column
                prop="phone"
                label="联系电话"
                width="200"
              />
              <el-table-column
                prop="position"
                label="职位"
                width="200"
              />
              <el-table-column
                prop="stat"
                label="状态"
                width="200"
              />

              <el-table-column

                prop="operation"
                label="操作"
                width="300"
              >
                <template #default="{row}">
                  <el-button type="text" size="mini" @click="editData(row)">编辑</el-button>
                  <el-button type="text" size="mini">重置密码</el-button>
                  <el-button type="text" size="mini">停用</el-button>
                  <el-button type="text" size="mini" @click="delData(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination
              :current-page="page._page"
              :page-sizes="[5,6,10]"
              :page-size="page._limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-tab-pane>

        <!-- 参数设置（第二页） -->
        <el-tab-pane label="参数设置">
          2
        </el-tab-pane>
      </el-tabs>

      <!-- 弹出层组件 -->
      <el-dialog
        title="新增人员"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose"
      >
        <el-form ref="roleform" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>

          <el-form-item label="手机号" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="职称" prop="position">
            <el-input v-model="ruleForm.position" />
          </el-form-item>
          <el-form-item label="权限" prop="power">
            <el-tree
              :data="treeData"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            />

          </el-form-item>

        </el-form>

        <!-- 弹层尾部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBtn">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getUserList, editUserList, delData, addUserList } from '@/api/systemset';
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      var phone = value.replace(/\s/g, '');// 去除空格
      // 校验手机号，号段主要有(不包括上网卡)：130~139、150~153，155~159，180~189、170~171、176~178。14号段为上网卡专属号段
      const regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value.length === 0) {
        callback();
      } else {
        if (!regs.test(phone)) {
          callback([new Error('手机号输入不合法')]);
        } else {
          callback();
        }
      }
    };
    return {
      // 树形控件数据
      treeData: [{
        id: 1,
        label: '店铺管理',
        children: [{
          id: 4,
          label: '商铺列表',

        }],
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1',
        }, {
          id: 6,
          label: '二级 2-2',
        }],
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1',
        }, {
          id: 8,
          label: '二级 3-2',
        }],
      }],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 头部输入框数据绑定
      account: '',
      username: '',
      // 第一页表单数据
      tableData: [{

      }],
      // 弹出框表单数据
      ruleForm: {
        id: '',

      },
      // 校验规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' },
        ],
        phone: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { validator: validatePhone, trigger: 'blur' },
        ],
        position: [{ required: true, message: '请输入职称', trigger: 'blur' }],
      },
      dialogVisible: false,
      // 分页
      page: {
        total: 13,
        _limit: 5,
        _page: 1,
      },
    };
  },
  async created() {
    this.getUserList();
    const res = await getUserList();
    this.page.total = res.data.length;
  },
  methods: {
    // 分页按键
    handleCurrentChange(newPage) {
      this.page._page = newPage;
      this.getUserList();
    },
    handleSizeChange(newSize) {
      this.page._limit = newSize;
      this.getUserList();
    },
    // 弹出层关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.ruleForm = {};
        })
        .catch(_ => {});
    },
    // 获取数据
    async getUserList() {
      const res = await getUserList(this.page);
      console.log(res);
      this.tableData = res.data;
    },
    // 编辑数据
    editData(data) {
      this.ruleForm = { ...data };
      this.dialogVisible = true;
    },
    // 弹层确认键 （新增+编辑）
    async btnOk() {
      if (this.ruleForm.id !== '') {
        const res = await editUserList(this.ruleForm, this.ruleForm.id);
        console.log(res);
      } else {
        // { username: this.ruleForm.username, phone: this.ruleForm.phone, position: this.ruleForm.position }
        console.log(this.ruleForm);
        await addUserList(this.ruleForm);
        // console.log(resu);
        this.ruleForm = {};
        const res = await getUserList();
        this.page.total = res.data.length;
      }
      this.getUserList();
      this.dialogVisible = false;
      this.ruleForm = {};
      this.$refs.roleform.clearValidate();
    },
    // 取消弹出层
    closeBtn() {
      this.ruleForm = {};
      this.$refs.roleform.clearValidate();
      this.dialogVisible = false;
    },
    // 删除数据
    async delData(id) {
      try {
        await this.$confirm('确定删除吗？');
        await delData(id);

        const res = await getUserList();
        this.getUserList();
        this.page.total = res.data.length;
        this.$message.success('删除成功!');
      } catch (error) {
        console.log(error);
      }
    },
    // 查询数据
    async search() {
      if (this.phone === '') {
        this.getUserList();
        return;
      }
      const res = await getUserList({ username: this.username });
      this.tableData = res.data.map(v => { v._visible = false; return v; });
    },
  },
};
</script>

<style lang="scss">
.body{
  overflow-y: scroll;
}
.app-main{
  background-color: #f0f2f5;
  overflow: auto!important;
.container{
   margin: 20px 10px 0 10px;
   background-color: white;
  //  display: none!important;
  .el-tabs__nav-wrap::after {
    width: 0%;
    // margin-left: 25px;
  }

  .el-tabs__header{
    padding-left: 25px;
    padding-top: 20px;
  }
  .el-col{
    margin-left:25px ;
  }
  .nav2{
    margin-top: 15px;

    .el-input{
    width:70%;

     }
     .input{

 .el-input--suffix{
    width: 100%;
    .el-input__inner{
      height: 31px;
    }
  }
 }

}
  .nav3{

     margin-top: 25px;
    // .el-col-12{
    //   margin-left: 45px;
    //   margin-top: 8px;
    // }
    .el-col-11{
      margin-right: 35px;
    }

   }
}
}

</style>
